import React, { useState, useEffect, useRef } from 'react';
import { View, Text } from '@tarojs/components';

import './tabs.scss';

const Tabs = ({ tabsList = [],getCurrentTab = ()=>{}, curTab = -1 }) => {
  const setTab = (index) => {
    getCurrentTab(index);
  };


  useEffect(() => {
    if (curTab != -1) {
      setTab(curTab);
    }
  }, [curTab]);

  return (
    <View className="orderTabs no-bar">
      {tabsList.map((tab, index) => (
        <View
          className="item-wrap"
          key={tab.label + '_' + index}
        >
          <View className="item" onClick={() => setTab(index)}>
            <Text className={['label', curTab == index && 'act'].join(' ')}>{tab.label}</Text>
            {curTab == index && <Text className="active"></Text>}
          </View>
        </View>
      ))}
    </View>
  );
};

export default Tabs;
